<template>
  <div>
    <van-cell-group>
      <van-cell >
        <van-col span="12"><van-icon name="location-o" />收货人:  {{buyName}}</van-col>
        <van-col span="8">电话: {{tel}}</van-col>
        <van-col span="21" style="padding-left: 43px;font-size: 13px">地址: {{address}}</van-col>
      </van-cell>
    </van-cell-group>

    <van-card
      :num="num"
      :price="price"
      :desc="specs"
      :title="phoneName"
      :thumb="icon"
    />
    <van-cell-group>
      <van-cell >
        <van-col span="12"><van-icon name="location-o" />配送方式:</van-col>
        <van-col span="8">快递</van-col>
      </van-cell>
    </van-cell-group>

    <van-cell-group>
      <van-cell >
        <van-col span="12"><van-icon name="location-o" />合计:</van-col>
        <van-col span="8">{{price}}</van-col>
      </van-cell>
    </van-cell-group>

    <van-cell-group>
      <van-cell >
        <van-col span="12"><van-icon name="location-o" />订单状态</van-col>
        <van-col span="8">{{payStatusTrans(payStatus)}}</van-col>
      </van-cell>
    </van-cell-group>

    <van-submit-bar
        button-text="返回主页"
        @submit="onSubmit"
    />
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: "Info",
  data() {
    return {
      orderId: '126457991231345645972',
      buyName: '小明',
      phoneName: 'Honor BA',
      payStatus: 1,
      freight: 10,
      tel: '123456',
      address: '云南省临沧市撒旦法放假了',
      num: '1',
      price: '2800.0',
      specs: '20GB',
      icon: 'https://img01.yzcdn.cn/vant/ipad.jpeg'
    }
  },
  created() {
    this.buyName = this.$route.query.buyName,
        this.phoneName=this.$route.query.tel,
        this.address = this.$route.query.address,
        this.icon = this.$route.query.url,
        this.price = this.$route.query.price
  },
  methods: {
   onSubmit() {
        let instance = Toast("欢迎你的参与");
        setTimeout(()=>{
          instance.close();
          this.$router.push('/iphoneStore')
        },1000)
    },
    payStatusTrans(payStatus){
     if(payStatus==1){
       return '已支付'
     }else{
       return '未支付'
     }
    }
  }
}
</script>

<style scoped>

</style>